<template>
    <div id="svgMain">

          <!-- <object @mousedown="down"
         @mousemove="move"
         @mouseup="ups" style="width: 1000px;height: 800px;" data="https://storage.googleapis.com/jlr-ve-racs-qa3-illustrations/qy00003.svgz?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=gcs-qa-file-transfer%40jlr-ve-racs-qa.iam.gserviceaccount.com%2F20230216%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20230216T085048Z&X-Goog-Expires=86400&X-Goog-SignedHeaders=host&X-Goog-Signature=46704c2eeb58052e64ddd3030d92c91e059bad276b3f59a35dc0a5cd4a1a1000ad3d4109fa8f92438f8c05a3ff6553d2528321950684bb0078983159fdcc4044e94dbfb30ec7ef527f94217f8fb49439d7e784161d913b2d5e60d0601a8ec11246e4f54cff01926656f755c363b0fd9eb32849b526521e1d1980e906738309d79ed89fd43517b2e09b152f94ca5124e0d3da071b48556ec9a6900c27d84df93982d1af745e222173fa76d4a6df3d4b380a7f5bcdf592c8e15e7eaac848e98ce362db4d092e5c94766d35fb59288f74060ebbbd196b5ca3ce13f6bb553661a8174239da5509230dec214f1722d3fb2d84ab74157bedbdbe3c38b702590fc742cd">

            <g id="lines" stroke="#000" stroke-width="3" fill="none">
                <path stroke-miterlimit="10" d="" />
            </g>
          </object> -->
<img  width="300" height="100"  src="https://storage.googleapis.com/jlr-ve-racs-qa3-illustrations/qy00003.svgz?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=gcs-qa-file-transfer%40jlr-ve-racs-qa.iam.gserviceaccount.com%2F20230216%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20230216T085048Z&X-Goog-Expires=86400&X-Goog-SignedHeaders=host&X-Goog-Signature=46704c2eeb58052e64ddd3030d92c91e059bad276b3f59a35dc0a5cd4a1a1000ad3d4109fa8f92438f8c05a3ff6553d2528321950684bb0078983159fdcc4044e94dbfb30ec7ef527f94217f8fb49439d7e784161d913b2d5e60d0601a8ec11246e4f54cff01926656f755c363b0fd9eb32849b526521e1d1980e906738309d79ed89fd43517b2e09b152f94ca5124e0d3da071b48556ec9a6900c27d84df93982d1af745e222173fa76d4a6df3d4b380a7f5bcdf592c8e15e7eaac848e98ce362db4d092e5c94766d35fb59288f74060ebbbd196b5ca3ce13f6bb553661a8174239da5509230dec214f1722d3fb2d84ab74157bedbdbe3c38b702590fc742cd"/>

        <svg @mousedown.stop="down"
          @mousemove.stop="move"
         @mouseup.stop="ups"
         version="1.1" id="container" width="1000" height="840" style="border:1px solid #000;" xmlns:svg="http://www.w3.org/2000/svg" xml:space="preserve" >
                <g id="lines" stroke="#000" stroke-width="3" fill="none">
                    <!-- <reat></reat>
                  <svg width="200" height="150" style="border: 1px solid steelblue" >


                  		</svg>
 -->
                </g>

            </svg>


        <div>
            <button @click="drawArrow()">箭头</button>
        </div>
    </div>
</template>

<script>
  export default {
  	data(){
  		return {
  			groupId: 1,
  			lineWidth: 3,
        beginX:0,
        beginY:0,
        lineD:"",
        moves:false,
        isFirst:true,
        positions:""
  		}
  	},
    mounted() {
      this.lines = document.getElementById("lines");

    },
  	methods:{
      down(e){

         this.beginX = e.offsetX;
         this.beginY = e.offsetY;
//
this.positions = 'M'+`${e.offsetX} ${e.offsetY}`

        this.lines.innerHTML += '<path style="stroke: red; stroke-miterlimit="10" d="" />';//每次鼠标按下的时候创建一条新路径
        // document.getElementById("container").onmousemove = ev=>{

        //     if(this.positions != ""){

        //       this.positions +=' L'+ev.offsetX+' '+ev.offsetY;

        //         this.lines.lastElementChild.setAttribute('d',this.positions)
        //     }

        // }
        this.moves = true;

      },
      move(ev){
        if(this.moves){

          // if(this.lines.lastElementChild.getAttribute('d')==''){
          //       this.lineD = 'M'+this.beginX+' '+this.beginY+' L'+ev.offsetX+' '+ev.offsetY;
          //   }else{
          //       this.lineD +=' L'+ev.offsetX+' '+ev.offsetY;
          //   }

          if(this.positions != ""){

            this.positions +=' L'+ev.offsetX+' '+ev.offsetY;

              this.lines.lastElementChild.setAttribute('d',this.positions)
          }
        }

      },
      ups(){
           this.moves = false;
           this.positions = ""
      },
      drawArrow(){
        if(!this.moves){
          this.lines.removeChild(this.lines.lastElementChild)
        }
      }
  		}
  }
</script>
